﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
    <style>
        .roleaddform {
            width: 320px;
            border: 1px solid #e6e6e6;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }
        .layui-table-total {
            display: none;
        }

        #pagination-container {
            position: relative;
            width: 100%;
            background-color: white;
            padding: 10px;
            z-index: 100;
            margin-top: 10px; /* 根据需要调整 */
        }
    </style>
</head>
<body>
    <!--
    本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
    -->
    <div style="padding: 16px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <div id="pagination-container"></div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
          <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
          <button class="layui-btn layui-btn-sm" id="dropdownButton">
            下拉按钮
            <i class="layui-icon layui-icon-down layui-font-12"></i>
          </button>
          <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
            重载测试
            <i class="layui-icon layui-icon-down layui-font-12"></i>
          </button>
          <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
            <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
            <i class="layui-icon layui-icon-down layui-font-12"></i>
          </button>
        </div>
    </script>
    <script type="text/html" id="toolDemo">
        <div class="layui-clear-space">
          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-xs" lay-event="more">
            更多
            <i class="layui-icon layui-icon-down"></i>
          </a>
        </div>
    </script>
    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['table', 'dropdown', 'layer', 'jquery'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 创建渲染实例
            table.render({
                elem: '#test',
                url: 'https://localhost:7174/api/Message/GetRole',
                url: "@ViewBag.BaseUrl/T5/Message/GetRole",
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips',
                    onClick: function (obj) { // 2.9.12+
                        layer.alert('自定义工具栏图标按钮');
                    }
                }],
                height: 'full-35', // 最大高度减去其他容器已占有的高度差
                css: [ // 重设当前表格样式
                    '.layui-table-tool-temp{padding-right: 145px;}'
                ].join(''),
                cellMinWidth: 80,
                totalRow: true, // 开启合计行
                page: true,
                request: {
                    pageName: 'pageIndex',
                    limitName: 'pageSize'
                },
                limit:15,
                limits:[2,15,20],
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'roleId', fixed: 'left', width: 110, title: '角色Id', sort: true },
                    { field: 'roleName', width: 110, title: '角色名称' },
                    { field: 'createName', title: '创建人', width: 110 },
                    { field: 'createTime', width: 200, title: '创建日期', sort: true },
                    { field: 'updateName', title: '修改人', width: 110, sort: true },
                    { field: 'updateTime', width: 200, title: '修改日期', sort: true },
                    { field: 'isDeleted', title: '状态', width: 100, sort: true }
                ]],
                done: function () {
                    var id = this.id;
                    // 下拉按钮测试
                    dropdown.render({
                        elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                        data: [{
                            id: 'add',
                            title: '添加'
                        }, {
                            id: 'update',
                            title: '编辑'
                        }, {
                            id: 'delete',
                            title: '删除'
                        }],
                        // 菜单被点击的事件
                        // 菜单被点击的事件
                        click: function (obj) {
                            var checkStatus = table.checkStatus(id);
                            var data = checkStatus.data;
                            switch (obj.id) {
                                case 'add':
                                    window.location.href = '@Url.Action("AddRole", "RBAC")';
                                    break;
                                case 'update':
                                    if (data.length !== 1) return layer.msg('请选择一行');
                                    var currentRowData = data[0]; // 保存当前行数据
                                    var isDeletedChecked = currentRowData.isDeleted ? 'checked' : '';
                                    var notDeletedChecked = currentRowData.isDeleted ? '' : 'checked';

                                    layer.open({
                                        title: '编辑角色 - ' + currentRowData.roleName,
                                        type: 1,
                                        content: `
                                        <div class="roleaddform">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="RoleName" value="${currentRowData.roleName}"
                                       lay-verify="required" placeholder="请填写角色名称"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="radio" name="IsDeleted" value="false" title="否" ${notDeletedChecked}>
                                <input type="radio" name="IsDeleted" value="true" title="是" ${isDeletedChecked}>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="updateRole">提交修改</button>
                        </div>
                    </form></div>
                `,
                                        success: function (layero, index) {
                                            // 重新渲染表单
                                            layui.form.render();

                                            var form = layui.form;
                                            form.on('submit(updateRole)', function (formData) {
                                                var field = formData.field;
                                                var isDeleted = field.IsDeleted === "true";
                                                var loadIndex = layer.load(2);

                                                // 使用保存的行数据中的roleId
                                                var roleId = currentRowData.roleId;

                                                console.log('准备提交的数据:', {
                                                    RoleId: roleId,
                                                    RoleName: field.RoleName,
                                                    IsDeleted: isDeleted
                                                });

                                                $.ajax({
                                                    url: 'https://localhost:7272/api/Message/RoleUpdate',
                                                    //url: "@ViewBag.BaseUrl/T6/Message/RoleUpdate",
                                                    type: 'post',
                                                    contentType: 'application/json',
                                                    data: JSON.stringify({
                                                        RoleId: roleId,
                                                        RoleName: field.RoleName,
                                                        IsDeleted: isDeleted,
                                                        CreateTime: currentRowData.createTime, // 保留原创建时间
                                                        UpdateTime: new Date().toISOString(), // 更新修改时间
                                                        CreateName: currentRowData.createName, // 保留原创建人
                                                        UpdateName: '当前用户' // 这里应该替换为实际当前用户
                                                    }),
                                                    dataType: 'json',
                                                    success: function (res) {
                                                        console.log('API响应:', res);
                                                        layer.close(loadIndex);
                                                        if (res.code === 206) {
                                                            layer.msg(res.msg, { icon: 1 }, function () {
                                                                layer.close(index);
                                                                table.reload('test');
                                                            });
                                                        } else {
                                                            layer.msg(res.msg || '修改失败，状态码: ' + res.code, { icon: 2 });
                                                        }
                                                    },
                                                    error: function (xhr, status, error) {
                                                        layer.close(loadIndex);
                                                        console.error('API错误:', xhr.responseText);
                                                        var errorMsg = '请求失败: ';
                                                        if (xhr.responseJSON && xhr.responseJSON.message) {
                                                            errorMsg += xhr.responseJSON.message;
                                                        } else {
                                                            errorMsg += error;
                                                        }
                                                        layer.msg(errorMsg, { icon: 2 });
                                                    }
                                                });
                                                return false;
                                            });
                                        }
                                    });
                                    break;
                                case 'delete':
                                    if (data.length === 0) {
                                        return layer.msg('请选择一行');
                                    }
                                    layer.confirm('你确定要删除吗？', function (index) {
                                        var roleId = data[0].roleId;
                                        var loadIndex = layer.load(2);
                                        $.ajax({
                                            url: 'https://localhost:7272/api/Message/DelRole',
                                            //url: "@ViewBag.BaseUrl/T6/Message/DelRole",
                                            type: 'post',
                                            contentType: 'application/json',
                                            dataType: 'json',
                                            data: JSON.stringify({ roleId: roleId }),
                                            success: function (res) {
                                                console.log(res);
                                                layer.close(loadIndex);
                                                if (res.code === 204) {
                                                    layer.msg(res.msg, { icon: 1 }, function () {
                                                        layer.close(index);
                                                        table.reload('test');
                                                    });
                                                } else {
                                                    layer.msg(res.msg || '删除失败', { icon: 2 });
                                                }
                                            },
                                            error: function (xhr, status, error) {
                                                layer.close(loadIndex);
                                                layer.msg('请求失败:' + error, { icon: 2 });
                                            }
                                        });
                                    });
                                    break;
                            }
                        }
                    });

                    // 重载测试
                    dropdown.render({
                        elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
                        data: [{
                            id: 'reload',
                            title: '重载'
                        }, {
                            id: 'reload-deep',
                            title: '重载 - 参数叠加'
                        }, {
                            id: 'reloadData',
                            title: '仅重载数据'
                        }, {
                            id: 'reloadData-deep',
                            title: '仅重载数据 - 参数叠加'
                        }],
                        // 菜单被点击的事件
                        click: function (obj) {
                            switch (obj.id) {
                                case 'reload':
                                    // 重载 - 默认（参数重置）
                                    table.reload('test', {
                                        where: {
                                            abc: '123456',
                                            //test: '新的 test2',
                                            //token: '新的 token2'
                                        },
                                        /*
                                        cols: [[ // 重置表头
                                          {type: 'checkbox', fixed: 'left'},
                                          {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRow: '合计：'},
                                          {field:'sex', title:'性别', width:80, edit: 'text', sort: true},
                                          {field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{= d.experience }} 分</div>'},
                                          {field:'logins', title:'登入次数', width:100, sort: true, totalRow: true},
                                          {field:'joinTime', title:'加入时间', width:120}
                                        ]]
                                        */
                                    });
                                    break;
                                case 'reload-deep':
                                    // 重载 - 深度（参数叠加）
                                    table.reload('test', {
                                        where: {
                                            abc: 123,
                                            test: '新的 test1'
                                        },
                                        //defaultToolbar: ['print'], // 重载头部工具栏右侧图标
                                        //cols: ins1.config.cols
                                    }, true);
                                    break;
                                case 'reloadData':
                                    // 数据重载 - 参数重置
                                    table.reloadData('test', {
                                        where: {
                                            abc: '123456',
                                            //test: '新的 test2',
                                            //token: '新的 token2'
                                        },
                                        scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
                                        height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                        //url: '404',
                                        //page: {curr: 1, limit: 30} // 重新指向分页
                                    });
                                    break;
                                case 'reloadData-deep':
                                    // 数据重载 - 参数叠加
                                    table.reloadData('test', {
                                        where: {
                                            abc: 123,
                                            test: '新的 test1'
                                        }
                                    }, true);
                                    break;
                            }
                            layer.msg('可观察 Network 请求参数的变化');
                        }
                    });

                    // 行模式
                    dropdown.render({
                        elem: '#rowMode',
                        data: [{
                            id: 'default-row',
                            title: '单行模式（默认）'
                        }, {
                            id: 'multi-row',
                            title: '多行模式'
                        }],
                        // 菜单被点击的事件
                        click: function (obj) {
                            var checkStatus = table.checkStatus(id);
                            var data = checkStatus.data; // 获取选中的数据
                            switch (obj.id) {
                                case 'default-row':
                                    table.reload('test', {
                                        lineStyle: null // 恢复单行
                                    });
                                    layer.msg('已设为单行');
                                    break;
                                case 'multi-row':
                                    table.reload('test', {
                                        // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                                        lineStyle: 'height: 95px;'
                                    });
                                    layer.msg('即通过设置 lineStyle 参数可开启多行');
                                    break;
                            }
                        }
                    });
                },
                error: function (res, msg) {
                    console.log(res, msg)
                }
            });

            // 工具栏事件
            table.on('toolbar(test)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(layui.util.escape(JSON.stringify(data)));
                        break;
                    case 'getData':
                        var getData = table.getData(id);
                        console.log(getData);
                        layer.alert(layui.util.escape(JSON.stringify(getData)));
                        break;
                };
            });
            // 表头自定义元素工具事件 --- 2.8.8+
            table.on('colTool(test)', function (obj) {
                var event = obj.event;
                console.log(obj);
                if (event === 'email-tips') {
                    layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
                        title: '当前列属性选项'
                    });
                }
            });
            
            // table 滚动时移除内部弹出的元素
            var tableInst = table.getOptions('test');
            tableInst.elem.next().find('.layui-table-main').on('scroll', function () {
                dropdown.close('dropdown-table-tool');
            });

         
        });
    </script>
</body>
</html>